Skip to content

fix(shared): use border box for element resize#2419

Closed
apples-kksk wants to merge 2 commits into
pmndrs:nextfrom
apples-kksk:fix/use-resize-border-box
Closed

fix(shared): use border box for element resize#2419
apples-kksk wants to merge 2 commits into
pmndrs:nextfrom
apples-kksk:fix/use-resize-border-box

Conversation

@apples-kksk
Copy link
Copy Markdown

@apples-kksk apples-kksk commented May 12, 2026

Requested

Fixes #2288

Implemented

  • Observe elements with { box: "border-box" } when supported.
  • Prefer ResizeObserverEntry.borderBoxSize for reported dimensions.
  • Preserve fallback behavior for older browsers by falling back to contentRect and to plain observe(target) when observe options are unsupported.
  • Map inlineSize/blockSize for vertical and sideways writing modes.
  • Added unit coverage for border-box sizing, vertical writing mode mapping, sideways writing mode mapping, contentRect fallback, unsupported observe options fallback, and non-TypeError observe failures.

Not covered

No changes to window resize handling

Validated

  • git diff --check
  • Attempted targeted validation with:
  • yarn jest packages/shared/src/dom-events/resize/resizeElement.test.ts --runInBand
  • yarn prettier --check packages/shared/src/dom-events/resize/resizeElement.ts packages/shared/src/dom-events/resize/resizeElement.test.ts

Both Yarn commands could not run in this checkout because the Yarn node_modules state file is missing and dependencies are not currently installed.

@vercel
Copy link
Copy Markdown

vercel Bot commented May 12, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
react-spring Ready Ready Preview May 12, 2026 4:42pm

Request Review

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 12, 2026

🦋 Changeset detected

Latest commit: ef91275

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages
Name Type
@react-spring/shared Patch
@react-spring/animated Patch
@react-spring/core Patch
@react-spring/parallax Patch
@react-spring/rafz Patch
@react-spring/types Patch
@react-spring/konva Patch
@react-spring/native Patch
@react-spring/three Patch
@react-spring/web Patch
@react-spring/zdog Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@joshuaellis
Copy link
Copy Markdown
Member

Thanks for digging into this @apples-kksk — your diagnosis and the writing-mode handling were spot on, and they directly informed #2432.

A few reasons I went with a fresh PR rather than landing this one as-is:

  • Test framework: this repo migrated to Vitest in real Chromium a while back, so the Jest-based mocks needed rewriting against the real ResizeObserver API.
  • box: 'border-box' try/catch fallback: the option has been supported in every evergreen browser since 2020, so I dropped it to keep the surface area small.
  • Changeset wording: tweaked to describe the user-visible behaviour change.

Really appreciate the work — flagging the writing-mode case in particular saved a regression. 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[bug]: useResize uses content box instead of border box

2 participants